<template>
  <span v-if="props.showText">{{ currValue }}</span>
  <el-date-picker
    v-else
    v-model="currValue"
    type="datetime"
    style="width: 100%"
    :format="props.format"
    :value-format="props.valueFormat"
    @change="handleChange"
    @blur="handleBlur"
  />
</template>

<script setup>
import {ref, watch} from 'vue';

const emit = defineEmits(['update:modelValue', 'change', 'blur']);
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  },
  valueFormat: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  },
  showText: Boolean,
});

const currValue = ref(props.modelValue || '');

const handleChange = ($event) => {
  emit('update:modelValue', currValue.value);
  emit('change', $event);
};

const handleBlur = ($event) => {
  emit('update:modelValue', currValue.value);
  emit('blur', $event);
};

watch(() => props.modelValue, (newVal) => {
  currValue.value = newVal || '';
});
</script>